import React, { useState, useEffect } from "react";
import { LeftOutline } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
import { SearchBar, List } from 'antd-mobile'
import Tab from '../../hooks/friends'
import axios from "axios";

import "./style.css";
function Customer() {
  const [value, setValue] = useState("");
  const [user, setUser] = useState([]);
  const navigate = useNavigate();
  let [accessToken, setaccessToken] = useState(JSON.parse(localStorage.getItem('accessToken')) || "")
  const getuser = async ()=>{
    const res = await axios.get("http://localhost:3000/order_list", {
      headers: {
        'Authorization': accessToken
      }
    })
    setUser(res.data.data)
    console.log(res.data.data)
  }
  useEffect(() => {
    getuser()
  },[])
  const handelAnt = async(e)=>{
    navigate("/wxq/pro",{
     state:{
       e
     }
    })
  }
  return (
    <div>
      <div className="inp">
        <LeftOutline
          onClick={() => {
            navigate("/wxq/ord");
          }}
          className="inp1"
          color="#E3E8EA"
          style={{ fontSize: 25 }}
        />
        <h2 style={{fontSize:'2.2rem'}}>客户画像</h2>
      </div>
      <div className="customer">
        <SearchBar
         className="searchBars"
          placeholder="请输入内容"
          value={value}
          onChange={(val) => {
            setValue(val);
          }}
        />
      </div>
      <div className="ordBox">
      <List >
      {user.map(user => (
        <List.Item onClick={()=>{
          handelAnt(user)
        }}  className="customerList"
          key={user._id}
        >
          <div className="customerList1">
          <div className="userImg">
            {user.career}
          </div>
          <div>
          {user.ShoopG}
          </div>
          </div>
        </List.Item>
      ))}
    </List>
      </div>
      <Tab></Tab>
    </div>
  );
}

export default Customer;
